
import { Navigate, useRoutes, type RouteObject } from "react-router"
import { useSelector } from "react-redux"

import Reg from "../views/reg/Reg"
// import Home from "../views/Home"
// import Users from "../views/user/Users"
import { Suspense,lazy } from "react"
import RequireAuth from "./RequireAuth"

// import Login from "../views/login/Login"

const Login=lazy(()=>import('../views/login/Login')) //路由懒加载

const Users=lazy(()=>import('../views/user/Users')) //路由懒加载
const FeeList=lazy(()=>import('../views/fee/FeeList')) 
const Home=lazy(()=>import('../views/Home')) 
const UserEdit=lazy(()=>import('../views/user/Edit')) 
const StateView=lazy(()=>import('../views/StateView')) 
const Index=lazy(()=>import('../views/Index')) 
const Demo=lazy(()=>import('../views/demo/Demo')) 
const UseContextDemo=lazy(()=>import('../views/demo/UseContextDemo')) 
const UseReducerDemo=lazy(()=>import('../views/demo/UseReducerDemo')) 
const UseMemoDemo=lazy(()=>import('../views/demo/UseMemoDemo')) 
const ReduxDemo=lazy(()=>import('../views/demo/ReduxDemo')) 
const ReduxDemo2=lazy(()=>import('../views/demo/ReduxDemo2')) 
const HOC=lazy(()=>import('../views/demo/HOC')) 


const routers:RouteObject[]=[

    {
        path:'/',
        element:<Suspense><RequireAuth><Home /></RequireAuth></Suspense>,
        children:[
            {
                path:'/index',
                element:<Suspense><Index /></Suspense>
            },
            {
                path:'/userinfo',
                element:<Suspense><Users /></Suspense>
            },

            {
                path:'/user-edit/:userid',
                element:<Suspense><UserEdit /></Suspense>
            },
            {
                path:'/fee',
                element:<Suspense><FeeList /></Suspense>
            },
            {
                path:'/state',
                element:<Suspense><StateView /></Suspense>
            }
             
        ]
    },
    {
        path:'/login',
        element:<Suspense><Login /></Suspense>
    },
    {
        path:'/reg',
        element:<Suspense><Reg></Reg></Suspense>
    },
    {
        path:'/demo',
        element:<Suspense><Demo></Demo></Suspense>
    },
    {
        path:'/usecontext',
        element:<Suspense><UseContextDemo /></Suspense>
    },
    {
        path:'/useReducer',
        element:<Suspense><UseReducerDemo /></Suspense>
    },
    {
        path:'/useMemo',
        element:<Suspense><UseMemoDemo /></Suspense>
    },
    
    {
        path:'/redux',
        element:<Suspense> <RequireAuth><ReduxDemo /></RequireAuth></Suspense>
    },
    {
        path:'/redux2',
        element:<Suspense><ReduxDemo2 /></Suspense>
    },
    {
        path:'/hoc',
        element:<Suspense><HOC /></Suspense>
    },
]



export default ()=>{

    return useRoutes(routers)

    // return useRoutes(routers)
}